/**
 * Created by xxx on 2017年12月14日.
 */
var currentpage = 1,totlepage = 1,i;//分页的当前页和总的页数
//当前第几页、总页数、总行数
var otherData = {pageLeft:0,pageRight:0};
//分页
var Page = React.createClass({
    setPage: function (e) {
        setPage($(e.target).html());
        this.props.onPageClick(1);
    },
    showPage: function () {
        showPage();
    },
    render: function () {
        {
            var items = [],
                svar = this;
            if(totlepage == 0 ){
                items.push({num:1,checked:true})
            }else if(totlepage < 6){
                for(i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-2;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="studentsInfo-page tableInfo-page">
                <div className="page-number">每页<span className="page-number-list" onClick={this.showPage}>{pagecount}</span>条</div>
                <div className="page-list" style={{top:pageListTop+"px"}}>
                    <ul>
                        {
                            pageList.map(function (item) {
                                return (<li onClick={svar.setPage}>{item}</li>)
                            })
                        }
                    </ul>
                </div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)} ><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                        {
                            items.map(function (item) {
                                return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)} className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                            })
                        }
                        <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)}><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                    </ol>
                </div>
            </div>
        );
    },
});

//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            otherData: this.props.otherData,
            tableData: [],//显示商户管理表单的数据
            oderDetailsTableData: [],//显示商户审核表单的数据
            navigation: '',//导航内容
            oderMangerPageInfo: {
                currentpage:1,//当前页
                pageLeft: 0,//0是不可点击，1反之
                pageRight: 0,//0是不可点击，1反之
                totlepage: 1,//总页数
            },//积分概况查询的数据分页信息
            droupName:'商户名称',//下拉列表
            businessDataList:[],
            businessDataAll:[],
            trData: [],
        }
    },
    componentDidMount: function () {
        var svar = this;
        suixun.hideLoding();//显示加载中
        this.getBusinessPassList();
        this.getOrderData(1,this.state.droupName);
        $(document).keypress(function(e) {
            var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
            if (eCode == 13){
                if($("#orderQuery").is(":focus")){
                    svar.getOrderData(1,svar.state.droupName);
                }
            }
        });
    },
    /**
     * 获取所有商户
     */
    getBusinessPassList: function () {
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/credits/company/find_all_pass_name.json','',"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200 ){
                if(data.info.list){
                    this.setState({businessDataList:data.info.list,businessDataAll:data.info.list});
                }else{
                    this.setState({businessDataList:[],businessDataAll:[]});
                }
            }else{
                this.setState({businessDataList:[],businessDataAll:[]});

            }
        }.bind(this));
    },
    /**
     * 获取所有商户
     */
    getBusinessList: function () {
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/credits/company/find_all_name.json','',"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200 ){
                for(var i=0;i<data.info.list.length;i++){
                    this.state.businessDataList[i] = {key:i,name:data.info.list[i]};
                }
                this.setState({businessDataList:this.state.businessDataList,businessDataAll:this.state.businessDataList});
            }else{
                this.setState({businessDataList:[],businessDataAll:[]});
            }
        }.bind(this));
    },
    /**
     * 获取列表数据
     * @param page
     */
    getOrderData: function(page,droupName){
        var svar = this;
        var start = 0;
        if(page>1){
            start = (page-1)*pagecount;
        }
        var orderQuery = $("#orderQuery").val(),searchType = 1;
        if(droupName=='商品名称'){
            searchType = 1;
        }else if(droupName=='订单编号'){
            searchType = 2;
        }else if(droupName=='商户名称'){
            searchType = 3;
        }
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/credits/order/find_page.json?start='+start+'&length='+pagecount+'&searchType='+searchType+'&value='+orderQuery,'',"get",function(data){
            suixun.hideLoding();
            if(data.code == 200){
                var pageInfo = {};
                if(data.info.total==0){
                    currentpage = 1;
                    otherData.pageLeft = 0;
                    otherData.pageRight = 0;
                    totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                }else {
                    pageInfo = suixun.getPageInfo(start, pagecount, data.info.total);
                    currentpage = pageInfo.currentpage;
                    otherData.pageLeft = pageInfo.pageLeft;
                    otherData.pageRight = pageInfo.pageRight;
                    totlepage = pageInfo.totlepage;//初始化的时候赋值：分页的当前页和总的页数}
                }
                svar.setState({tableData:data.info.list==null?[]:data.info.list,otherData:otherData});
            }else{
                suixun.alert(data.msg,function (data) {
                    if(data){
                        currentpage = 1;
                        otherData.pageLeft = 0;
                        otherData.pageRight = 0;
                        totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                        svar.setState({tableData:[],otherData:otherData});
                    }
                })
            }
        });

    },
    /**
     * 分页
     * @param num
     */
    onPageClick: function (num) {
        if(num > 0){
            currentpage = num;
        }else if(num == -1 && currentpage > 1){
            currentpage --;
        }else if(num == -2  && currentpage < totlepage){
            currentpage ++;
        }
        this.getOrderData(currentpage,this.state.droupName);
    },
    /**
     * 商品详情
     * @param trData
     */
    onSelectDetails: function (trData) {
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/credits/order/find_details.json?id='+trData.id,'',"get",function(data){
            suixun.hideLoding();
            if(data.code == 200){
                this.setState({trData:data.info.list});
                this.setNavigation('订单详情');
            }else{
                suixun.alert(data.msg);
            }
        }.bind(this));
    },
    /**
     * 设置导航名称
     * @return {XML}
     */
    setNavigation: function (name) {
        if(name==''){
            this.getOrderData(1,this.state.droupName);
        }
        this.setState({navigation:name})
    },
    /**
     * 设置下拉选择框内容
     * @return {XML}
     */
    setDroup: function (name) {
        if(name != this.state.droupName){
            $("#orderQuery").val('');
        }
        this.setState({droupName:name});
    },
    /**
     * 点击搜索输入框
     * @return {XML}
     */
    onClickQueryInput: function (e) {
        if(this.state.droupName == "商户名称"){
            this.schoolArray($(e.target).val(),$(e.target).attr("data-list"));
        }
    },
    /**
     * 改变搜索输入框的值
     * @return {XML}
     */
    onChangQueryInput: function (e) {
        if(this.state.droupName == "商户名称"){
            var val = $(e.target).val();
            if(val != ""){
                this.schoolArray(val,$(e.target).attr("data-list"));
            }else{
                $("."+$(e.target).attr("data-list")+"").hide();
            }
        }
    },
    /**
     * 排序
     * @param val
     * @param cls
     */
    schoolArray: function (val,cls) {
        var businessDataList = [];
        for(var i = 0;i < this.state.businessDataAll.length;i++){
            if((this.state.businessDataAll[i].name).indexOf(val) >= 0){
                businessDataList.push({name:this.state.businessDataAll[i].name});
            }
        }
        if(businessDataList.length == 0){
            $("."+cls+"").hide();
        }else{
            $("."+cls+"").show();
            this.setState({businessDataList:businessDataList});
        }
    },
    /**
     *点击商家名称搜索输入框
     */
    onClickBar: function (name) {
        $("#orderQuery").val(name);
        this.getOrderData(1,this.state.droupName);
    },
    render: function () {
        var trData = this.state.trData;
        var Tabels = this.state.tableData.map(function (data,index) {
                return (
                    <tr>
                        <td style={{width: '5%'}}>{index+1}</td>
                        <td style={{width: '30%'}}>{data.serialNum}</td>
                        <td style={{width: '30%'}}>{data.name}</td>
                        <td style={{width: '20%'}}>{data.createTime}</td>
                        <td style={{width: '15%'}}>
                            <div className='trButton trLeft table-select' onClick={this.onSelectDetails.bind(this,data)}>详情</div>
                        </td>
                    </tr>
                )
            }.bind(this));
        var queryDateLists = this.state.businessDataList.map(function (data) {
            return (
                <span className="businessNameList-value queryDateList-value schoolList-value" onClick={this.onClickBar.bind(this,data.name)}>{data.name}</span>
            )
        }.bind(this));
        /**
         * 详情数据
         * @type {Array}
         */
        var trDatas = trData.map(function (data) {
            return (
                <div>
                    <div className="body-content">
                        <div className="body-content-title">商品名称：</div>
                        <div className="body-content-text">
                            <div className="content-border element-content noBorder textInput" >{data.name}</div>
                        </div>
                    </div>
                    <div className="body-content">
                        <div className="body-content-title">商品金额：</div>
                        <div className="body-content-text">
                            <div className="content-border element-content noBorder textInput" >{data.orderMoney}</div>
                        </div>
                    </div>
                    <div className="body-content">
                        <div className="body-content-title" style={{width:'120px',backgroundPosition:'92px 4px'}}>商品消费状态：</div>
                        <div className="body-content-text">
                            <div className="content-border element-content noBorder textInput" >已消费（{data.usedtimes}/{data.usetimes}）</div>
                        </div>
                    </div>
                    <div className="body-title">使用人信息</div>
                    <div className="body-content">
                        <div className="body-content-title">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</div>
                        <div className="body-content-text">
                            <div className="content-border element-content noBorder textInput" >{data.peoplename==null?'---':data.peoplename}</div>
                        </div>
                    </div>
                    <div className="body-content">
                        <div className="body-content-title">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</div>
                        <div className="body-content-text">
                            <div className="content-border element-content noBorder textInput" >{data.peopletel==null?'---':data.peopletel}</div>
                        </div>
                    </div>
                </div>
            )
        }.bind(this));
        return (
            <div className="tableManage-body">
                <header>
                    <div className="header-left" style={this.state.navigation!=''?{display:'none'}:{display:'block'}}>
                        <div className="header-left-studentInfo">
                            <span className="header-left-button menu-width showOrder ">订单列表</span>
                        </div>
                    </div>
                    <div className="header-right" style={this.state.navigation!=''?{display:'none'}:{display:'block'}}>
                        <div className="header-right-select droup-select droup-type" >
                            <div className="school-or-table school-or-parent">{this.state.droupName}</div>
                            <span className="lower-right-corner"/>
                            <div className="drop-down left-drop-down" >
                                <span className="select-value school-name" onClick={this.setDroup.bind(this,'商户名称')}>商户名称</span>
                                <span className="select-value school-name" onClick={this.setDroup.bind(this,'商品名称')}>商品名称</span>
                                <span className="select-value school-name" onClick={this.setDroup.bind(this,'订单编号')}>订单编号</span>
                            </div>
                        </div>
                        <div className="header-query retrieval">
                            <div className="header-query-input">
                                <input className="query-value enterEvent" type="text" id="orderQuery" data-list="queryDateList" onChange={this.onChangQueryInput} onClick={this.onClickQueryInput}  maxLength='50' placeholder={"请输入"+this.state.droupName}/>
                            </div>
                            <div className="header-query-img"  onClick={this.setNavigation.bind(this,'')}/>
                            <div className="schoolList businessList queryDateList" data-inputId="orderQuery">
                                {queryDateLists}
                            </div>
                        </div>
                    </div>
                    <div className="header-left" style={this.state.navigation==''?{display:'none'}:{display:'block'}}>
                        <div style={this.state.navigation!=''?{display:'none'}:{display:'block'}} className='navigation'>订单列表</div>
                        <div style={this.state.navigation==''?{display:'none'}:{display:'block'}} className='navigation selsect' onClick={this.setNavigation.bind(this,'')}>
                            <a href="javascript:void(0);">订单列表</a><span>>{this.state.navigation}</span>
                        </div>
                    </div>
                </header>
                <div className="tableInfo" style={this.state.navigation!=''?{display:'none'}:{display:'block'}}>
                    <div className="tableInfo-data">
                        <div className="tableInfo-data-table" >
                            <table className="head-body">
                                <thead>
                                    <th style={{width: '5%'}}>序号</th>
                                    <th style={{width: '30%'}}>订单编号</th>
                                    <th style={{width: '30%'}}>商品名称</th>
                                    <th style={{width: '20%'}}>创建时间</th>
                                    <th style={{width: '15%'}}>操作</th>
                                </thead>
                                <tbody>
                                    {Tabels==""?'':Tabels}
                                </tbody>
                            </table>
                            {Tabels==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                        </div>
                    </div>
                    <Page otherData={this.state.otherData} onPageClick={this.onPageClick} />
                </div>
                {
                    this.state.navigation=='订单详情'?
                        <div className="body-updateAttendance" >
                            <div className="body-content">
                                <div className="body-content-title">订单编号：</div>
                                <div className="body-content-text">
                                    <div className="content-border element-content noBorder textInput" >{trData[0].serialNum}</div>
                                </div>
                            </div>
                            {trDatas}
                        </div>:''
                }
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }
}); 







 ReactDOM.render(
     <Main  otherData={otherData} />,
     document.getElementById('tableManage')
 );

/**
 * 点击下拉框——下拉框依赖
 */
$(".droup-type").click(function () {
    var dropDown = $('.drop-down');
    if(dropDown.is(":hidden")){
        dropDown.slideDown();
    }else{
        dropDown.slideUp();
    }
});
/**
 * 搜索框下拉列表——下拉框依赖
 */
$("*").bind("click",function(e){
    var target = $(e.target);
    if(target.closest(".businessNameList-value").length == 1){
        $("#"+$(target.parent()).attr("data-inputId")+"").val(target.html());
        $(".businessList").hide();
    }else{
        $(".businessList").hide();
    }
});